﻿/* AKQJ layout v1.0
http://lifesinger.googlecode.com/svn/trunk/lab/2008/grids_test2.html
http://iyunlu.com/demo/margin/
 */ 


/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* 最大的div */
.page {width:980px;margin:0 auto;}
.page2 {width:100%;}
.page3 {width:780px;margin:0 auto;}

.page, .page2 { *position: relative; } /* 否则ie下切换宽度自适应时布局会乱掉 */
.page2 .col-main .width { display: none } /* 自适应百分比 */

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* 主要的 一般指大的,采用自适应的话,会自适应的div */
.main {float:left;width:100%;}
/* sub是小的,extra是第三个小的, 都是固定宽度不动的 */
.sub,.extra {float:left;position:relative;}

/* 主要的div 设置定位需要这个 main里面如果要放内容请一定要包 */
.main-wrap{min-height:1px;}
/*间距div*/
.test-grid { padding: 10px; height: 90px; border: 1px dashed #aaa; }
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* 一栏 */
.grid-1{}
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* 两栏 间隙应该是10像素 平均减去这5像素 main-wrap要加5 sub要减5*/
/* 490(485) + 490(485) ≈ 1:1 */
.grid-1-1 .main-wrap {margin-left:495px;}/* 495 = 485 + 10的间隙 */
.grid-1-1 .sub{width:485px;margin-left:-100%;}
/* 490(485) + 490(485) ≈ 1:1 (反)*/
.grid-1-1f .main-wrap {margin-right:495px;}/* 495 = 485 + 10的间隙 */
.grid-1-1f .sub{width:485px;margin-left:-485px;}

/* 240(240) + 740(730) ≈ 1:2 */
.grid-1-2 .main-wrap {margin-left:250px;}/* 250 = 240 + 10的间隙*/
.grid-1-2 .sub{width:240px;margin-left:-100%;}

/* 740(730) + 240(240) ≈ 2:1 */
.grid-2-1 .main-wrap {margin-right:250px;}/* 250 = 240 + 10的间隙*/
.grid-2-1 .sub{width:240px;margin-left:-240px;}

/* 160(160) + 820(810) ≈ 1:3 */
.grid-1-3 .main-wrap {margin-left:170px;}/* 170 = 160 + 10的间隙*/
.grid-1-3 .sub{width:160px;margin-left:-100%;}

/* 820(810) + 160(160) ≈ 3:1 */
.grid-3-1 .main-wrap {margin-right:170px;}/* 170 = 160 + 10的间隙*/
.grid-3-1 .sub{width:160px;margin-left:-160px;}
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* 三栏 间隙应该是20像素 */
/* 320(320) + 340(320) + 320(310) ≈ 1:1:1 */
.grid-1-1-1 .main-wrap{margin:0 330px 0 330px;} /* 330 = 320 + 10的间隙 */
.grid-1-1-1 .sub{width:320px;margin-left:-100%;}
.grid-1-1-1 .extra{width:320px;margin-left:-320px;}

/* 240(240) + 500(480) + 240(240) ≈ 1:2:1 */
.grid-1-2-1 .main-wrap{margin:0 250px 0 250px;} /* 250 = 240 + 10的间隙 */
.grid-1-2-1 .sub{width:240px;margin-left:-100%;}
.grid-1-2-1 .extra{width:240px;margin-left:-240px;}

/* 240(240) +  240(240) +  500(480) ≈ 1:1:2 */
.grid-1-1-2 .main-wrap{margin-left:500px;} /* 500 = 240 + 240 + 20的间隙*/
.grid-1-1-2 .sub{width:240px;margin-left:-100%;}
.grid-1-1-2 .extra{width:240px;margin-left:-100%; left:250px;}/* 250 = 240 + 10的间隙*/

/* 500(480) + 240(240) +  240(240) ≈ 2:1:1 */
.grid-2-1-1 .main-wrap{margin-right:500px;} /* 500 = 240 + 240 + 20的间隙*/
.grid-2-1-1 .sub{width:240px;margin-left:-240px;}
.grid-2-1-1 .extra{width:240px;margin-left:-490px;}/* 490 = 240 + 240 + 10的间隙*/

/* 160(160) + 660(640) + 160(160) ≈ 1:3:1 */
.grid-1-3-1 .main-wrap{margin:0 170px 0 170px;}/* 170 = 160 + 10的间隙*/
.grid-1-3-1 .sub{width:160px;margin-left:-100%;}
.grid-1-3-1 .extra{width:160px;margin-left:-160px;}

/* 160(160) +  160(160) +  660(640) ≈ 1:1:3 */
.grid-1-1-3 .main-wrap{margin-left:340px;} /* 340 = 160 + 160 + 20的间隙*/
.grid-1-1-3 .sub{width:160px;margin-left:-100%;}
.grid-1-1-3 .extra{width:160px;margin-left:-100%;left:170px;}/* 170 = 160 + 10的间隙*/

/* 640(634) + 160(153) +  160(153)  ≈ 3:1:1 */
.grid-3-1-1 .main-wrap{margin-right:340px;}/* 340 = 160 + 160 + 20的间隙*/
.grid-3-1-1 .sub{width:160px;margin-left:-160px;}
.grid-3-1-1 .extra{width:160px;margin-left:-330px;}/* 330 = 160 + 160 + 10的间隙*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
.grid-1:after,.grid-1-1:after,.grid-1-1f:after,.grid-1-2:after,.grid-1-3:after,.grid-2-1:after,.grid-3-1:after,.grid-1-1-1:after,.grid-1-2-1:after,.grid-1-1-2:after,.grid-2-1-1:after,.grid-1-3-1:after,.grid-1-1-3:after,.grid-3-1-1:after{content:'\0020';display:block;height:0;clear:both;}
.grid-1,.grid-1-1,.grid-1-1f,.grid-1-2,.grid-1-3,.grid-2-1,.grid-3-1,.grid-1-1-1,.grid-1-2-1,.grid-1-1-2,.grid-2-1-1,.grid-1-3-1,.grid-1-1-3,.grid-3-1-1{zoom:1;margin-bottom:10px;background: #f3f3f3;}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

.box-left{border:0px dashed #aaa;float:left; padding:0px;}
.box-right{border:0px dashed #aaa;float:right; padding:0px;}
.box-left:after,.box-right:after{}


.w10{width:10px;}.w20{width:20px;}.w30{width:30px;}.w40{width:40px;}.w60{width:60px;}.w80{width:80px;}
.w100{width:100px;}.w120{width:120px;}.w140{width:140px;}.w180{width:180px;}.w200{width:200px;}.w220{width:220px;}.w240{width:240px;}
.w300{width:300px;}.w320{width:320px;}.w340{width:340px;}.w400{width:400px;}.w500{width:500px;}
.w600{width:600px;}.w700{width:700px;}.w800{width:800px;}
.w100-100{ width:100%;}
.h10{height:10px;}.h20{height:20px;}.h30{height:30px;}.h40{height:40px;}.h60{height:60px;}.h80{height:80px; line-height}
.h100{height:100px;}.h120{height:120px;}.h140{height:140px;}.h160{height:160px;}.h180{height:180px;}.h200{height:200px;}
.h300{height:300px;}.h400{height:400px;}.h500{height:500px;}.h600{height:600px;}.h700{height:700px;}.h800{height:800px;}

.lh12{line-height:12px;}.lh14{line-height:14px;}.lh16{line-height:16px;}.lh18{line-height:18px;}.lh20{line-height:20px;}
.lh22{line-height:22px;}.lh24{line-height:24px;}.lh26{line-height:26px;}.lh28{line-height:28px;}.lh30{line-height:30px;}

.text-left{ text-align:left;}
.text-right{ text-align:right;}

.clear{float:none;height:0;clear:both;font-size:0px;}